/*
 * @Description: 更新身份接受验证码的弹框组建ui
 * @Author: tao.xie
 * @Date: 2019-03-27 18:01:40
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-26 17:46:00
 */
 <template>
  <aniamated-dialog ref="dialog">
    <div class="content-wrapper flex-v flex-vc">
      <span>验证身份</span>
      <div class="flex-h flex-vc phoneno-wrapper xb_border_bottom eee">
        <span>手机号</span>
        <span>{{phoneno}}</span>
      </div>
      <div class="flex-h flex-ve code-wrapper xb_border_bottom eee">
        <div class="flex1">
          <input
            style="width:100%"
            placeholder="请输入验证码"
            v-model="vercationCode"
            maxlength="6"
          />
        </div>
        <get-validcode-btn
          @vclick="getValidCode"
          ref="getValidVodeButton"
        />
      </div>
      <div class="flex1 flex-v flex-hc">
        <div
          class="flex-h flex-vc flex-hc msg-wrapper"
          v-show="errMsg!==''"
        >
          <img src="../assets/err.png" />
          <span>{{errMsg}}</span>
        </div>
      </div>
      <div class="button-wrapper flex-h xb_border eee">
        <button
          class="flex1"
          @click="hide"
        >再看看</button>
        <button
          class="flex1 baseBgColorWithActive"
          @click="updateApplyInfo"
        >去更新身份</button>
      </div>
    </div>
  </aniamated-dialog>
</template>

<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
import GetValidCodeButtonInUpdateApplyinfoDialog from './input/GetValidCodeButtonInUpdateApplyinfoDialog'
import { sendSmsCode, checkUpdateApplyInfo } from '../api/api.js'
import { validVercationCode } from '../utils/StringValidUtils.js'
import { getUserInfo } from 'vue-xiaobu-utils'
import { open } from '@/utils/JumpUtils.js'
export default {
  components: {
    'aniamated-dialog': AnimatedDialog,
    'get-validcode-btn': GetValidCodeButtonInUpdateApplyinfoDialog
  },
  data() {
    return {
      phoneno: '',
      errMsg: '',
      vercationCode: ''
    }
  },
  mounted() {
    this.phoneno = getUserInfo().PHONE
    this.vercationCode = ''
  },
  methods: {
    show() {
      this.errMsg = ''
      this.vercationCode = ''
      this.$refs.dialog.show()
    },
    hide() {
      this.$refs.dialog.hide()
    },
    getValidCode() {
      this._sendSmsCode()
    },
    _sendSmsCode: async function () {
      try {
        await sendSmsCode(this.phoneno)
        this.$toastMsg('验证码已发送')
        this.$refs.getValidVodeButton.run()
      } catch (err) {
        // 协议返回的错误时toastMsg
        this.errMsg = err.toastMsg
      }
    },
    updateApplyInfo() {
      validVercationCode(this.vercationCode).then(() => {
        this._checkUpdateApplyInfo()
      }).catch(err => {
        this.errMsg = err.message
      })
    },
    _checkUpdateApplyInfo: async function () {
      try {
        let key = await checkUpdateApplyInfo(this.phoneno, this.vercationCode)
        this.hide()
        // 带着验证身份结果的上下午key，跳转至更新的界面
        open('changeindentityinfo.html?_tv=false&key=' + key)
      } catch (err) {

      }
    }
  }
}
</script>

 <style scoped>
/* 大的包裹层 */
.content-wrapper {
  width: 580px;
  height: 400px;
  background: #fff;
  border-radius: 8px;
}
/* 标题 */
.content-wrapper > span:first-of-type {
  color: #333;
  font-size: 20px; /*no*/
  line-height: 28px; /*no*/
  margin-top: 30px;
}
/* 手机号包裹层 */
.phoneno-wrapper {
  width: 520px;
  margin: 20px 30px 0px 30px;
}
/* 手机号标题及手机号 */
.phoneno-wrapper > span {
  color: #333;
  font-size: 16px; /*no*/
  line-height: 45px;
}
/* 手机号标题及手机号 */
.phoneno-wrapper > span:nth-of-type(2) {
  margin-left: 30px;
}
/* 验证码包裹层 */
.code-wrapper {
  width: 520px;
  height: 70px;
  padding-bottom: 10px;
}
/* 验证码输入框 */
.code-wrapper input {
  width: 192px;
  height: 45px;
  border: none;
  font-size: 16px; /*no*/
  line-height: 45px;
}
/* 错误提示图片 */
.msg-wrapper > img {
  width: 24px;
  height: 24px;
}
/* 错误提示文字 */
.msg-wrapper > span {
  font-size: 12px; /*no*/
  line-height: 16px; /*no*/
  color: #ff9938;
  margin-left: 10px;
}
.button-wrapper {
  width: 580px;
}
/* 错误提示按钮 */
.button-wrapper > button {
  height: 100px;
  border: none;
  font-size: 16px; /*no*/
  line-height: 22px; /*no*/
}
/* 错误提示第一个按钮 */
.button-wrapper > button:first-of-type {
  background: none;
}
/* 错误提示第二个按钮 */
.button-wrapper > button:nth-of-type(2) {
  color: #fff;
}
</style>
